<template>
  <!-- 导航栏 -->
  <el-row style="margin: 15px 20px;">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>主数据</el-breadcrumb-item>
      <el-breadcrumb-item>物料管理</el-breadcrumb-item>
    </el-breadcrumb>
  </el-row>
  <!-- 搜索栏 -->
  <el-row style="margin: 15px 20px;">
    <el-form :inline="true" :model="searchObject">
      <el-form-item label="名称">
        <el-input v-model="searchObject.materialName" placeholder="物料名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 15px 20px;">
    <el-button-group>
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary" @click="edit">修改</el-button>
      <el-button type="primary" @click="del">删除</el-button>
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-button type="primary" @click="importExcel">导入</el-button>
      <el-button type="primary" @click="refresh">刷新</el-button>
    </el-button-group>
  </el-row>
  <!-- 列表 -->
  <el-row style="margin: 15px 20px;"></el-row>

  <!-- 新增弹窗 -->
  <el-dialog v-model="dialogVisible" title="新增物料" width="50%">
    <el-form :model="materialForm" label-width="120px">
      <el-form-item label="物料编号">
        <el-input v-model="materialForm.materialId" />
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="materialForm.materialName" />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input v-model="materialForm.specification" />
      </el-form-item>
      <el-form-item label="单位ID">
        <el-input v-model.number="materialForm.unitId" />
      </el-form-item>
      <el-form-item label="分类ID">
        <el-input v-model.number="materialForm.categoryId" />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="materialForm.enabledFlag" placeholder="请选择">
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="安全库存">
        <el-input v-model.number="materialForm.safetyStock" />
      </el-form-item>
      <el-form-item label="最小库存量">
        <el-input v-model.number="materialForm.minStock" />
      </el-form-item>
      <el-form-item label="最大库存量">
        <el-input v-model.number="materialForm.maxStock" />
      </el-form-item>
      <el-form-item label="是否高价值易被盗">
        <el-select v-model="materialForm.highValueFlag" placeholder="请选择">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="materialForm.remark" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveMaterial">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";

const searchObject = ref({
  materialName: '',
});

const dialogVisible = ref(false); // 控制弹窗显示
const materialForm = ref({
  materialId: '',
  materialName: '',
  specification: '',
  unitId: null,
  categoryId: null,
  enabledFlag: 1,
  safetyStock: null,
  minStock: null,
  maxStock: null,
  highValueFlag: 0,
  remark: '',
});

// 新增按钮点击事件
function add() {
  // 重置表单
  materialForm.value = {
    materialId: '',
    materialName: '',
    specification: '',
    unitId: null,
    categoryId: null,
    enabledFlag: 1,
    safetyStock: null,
    minStock: null,
    maxStock: null,
    highValueFlag: 0,
    remark: '',
  };
  dialogVisible.value = true;
}

// 保存物料（后续可对接接口）
function saveMaterial() {
  console.log('保存的物料数据:', materialForm.value);
  dialogVisible.value = false;
}
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>